<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title背景裁切< /title>
        <style>
            div {
                width: 300px;
                height: 300px;
                border: 20px dotted red;
        
                padding: 20px;
            }

            ul {
                list-style: none;
            }

          div{
                float: left;
                margin-right: 50px;
            }

            .border:hover div {
                background-image: url(http://climg.mukewang.com/58dc9d360001d65806500650.jpg);
                background-clip: border-box;
                display: block;
            }

            .padding:hover div {
                background-image: url(http://climg.mukewang.com/58dc9d360001d65806500650.jpg);
                background-clip: padding-box;
                display: block;
            }

            .content:hover div {
                background-image: url(http://climg.mukewang.com/58dc9d360001d65806500650.jpg);
                background-clip: content-box;
                display: block;
            }
        </style>
</head>

<body>
    <ul>
        <li class="border">
            <h2>border-box</h2>
            <div></div>
        </li>
        <li class="padding">
            <h2>padding-box</h2>
            <div></div>
        </li>
        <li class="content">
            <h2>content-box</h2>
            <div></div>
        </li>
    </ul>
</body>

</html>